<template>
  <van-form>
    <van-cell-group inset>
      <van-field
        v-model="firstAmount"
        type="number"
        :label="firstLabel"
        @blur="convert('first')"
        right-icon="more-o"
        @click-right-icon="togglePicker('first')"
      />
      <van-field
        v-model="secondAmount"
        type="number"
        :label="secondLabel"
        @blur="convert('second')"
        right-icon="more-o"
        @click-right-icon="togglePicker('second')"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary"> 转换 </van-button>
    </div>
  </van-form>

  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker
      :columns="columns"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
  </van-popup>
</template>

<script setup>
import { getCurrencyList } from '@/services/apiCurrency';
import { ref, onMounted } from 'vue';

const firstAmount = ref(0);
const firstLabel = ref('CNY');

const secondAmount = ref(0);
const secondLabel = ref('USD');

const columns = ref([]);

function convert(flag) {}

const showPicker = ref(false);

const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false;

  convert();
};

function togglePicker(unit) {
  showPicker.value = true;
}

onMounted(async () => {
  const currencyList = await getCurrencyList();

  columns.value = Object.keys(currencyList).map((currency) => {
    return {
      text: currency.toUpperCase(),
      value: currency,
    };
  });
});
</script>
